<script setup lang="ts">
import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
import type { ResourceCardType } from '@/types/micro-scene';
import { useUserStore } from '@/stores/useUserStore';
import { computed } from 'vue';

const props = defineProps<{
  resourceCard: ResourceCardType
}>();

const emit = defineEmits<{
  delete: [resourceId: string]
  edit: [resourceId: string]
}>();

const userStore = useUserStore();
const showEdit = computed(() => {
  return userStore.isEditMicroScene
})

const handleDelete = () => {
  emit('delete', props.resourceCard.resourceId);
};

const handleEdit = () => {
  emit('edit', props.resourceCard.resourceId);
};
// 跳转到对应的网页链接
const handleJumpToResourceUrl = () => {
  window.open(props.resourceCard.resourceUrl, '_blank');
};
</script>

<template>
  <div
    class="bg-white rounded-lg transition-transform duration-200 hover:shadow-lg p-2 border-solid border-1 border-gray-200"
  >
    <div class="flex gap-4 aspect-[3/1]">
      <div class="w-2/5">
        <img
          :src="resourceCard.resourceImage" :alt="resourceCard.resourceTitle"
          class="w-full h-full object-cover rounded-lg"
        >
      </div>
      <div class="w-3/5 flex flex-col justify-between">
        <div class="h-full flex flex-col">
          <div class="flex justify-between">
            <h3 class="font-bold mb-2 text-lg">
              {{ resourceCard.resourceTitle }}
            </h3>
            <!-- 编辑和删除按钮 -->
            <div v-if="showEdit">
              <a-button type="text" @click="handleEdit">
                <template #icon>
                  <EditOutlined />
                </template>
              </a-button>
              <a-button type="text" danger @click="handleDelete">
                <template #icon>
                  <DeleteOutlined />
                </template>
              </a-button>
            </div>
          </div>

          <div class="text-sm leading-6 line-clamp-3 flex-grow">
            {{ resourceCard.resourceDescription || '暂无描述' }}
          </div>

          <div class="mt-auto text-right">
            <a-button type="primary" @click="handleJumpToResourceUrl">
              查看详情
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use '@/style/custom-theme.scss' as *;

.secondary-btn {
  color: $button-secondary-text-color !important;
  background-color: $button-secondary-bg !important;
}
</style>
